import Qt 4.7

FocusScope {
    id: focus_item
    width: 148
    height: 152
    signal startPage()

    MouseArea{
        id:mousearea
        anchors.fill: parent
        hoverEnabled:true
        onFocusChanged:{
            if(focus_item.activeFocus){
                focus_item.state = "active"
            }
            else{
                focus_item.state = "deactive"
            }
        }

        onClicked:{
            focus_item.startPage()
        }

        onMousePositionChanged:{
            if(containsMouse){
                focus_item.state = "active"
            }
        }

        onExited:{
            focus_item.state = "deactive"
        }

    }

    Rectangle {
        id: active_line

        width: 120
        color: "#ffffff"
        radius: 8
        anchors.top: parent.top
        anchors.topMargin: 103
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 13
        anchors.horizontalCenterOffset: 0
        anchors.horizontalCenter: parent.horizontalCenter
        opacity: 0
    }

    states: [
    State {
        name: "active"
        when:focus_item.activeFocus
        PropertyChanges {target: active_line; opacity: 0.3}
    },
    State {
        name: "deactive"
        when:!focus_item.activeFocus
        PropertyChanges {target: active_line;opacity: 0}
    }
    ]

    transitions: [
        Transition {
            NumberAnimation { properties: "opacity"; duration: 200 }
        }
    ]




}
